<template>
    <div class="control-btn-box">
        <div class="btn-box">
            <el-button type="warning" size="small" @click="batchToggleShow" title="批量处理"
                v-perm="permObj.update"
            >
                <el-icon><Checked /></el-icon>
            </el-button>
            <!-- <transition name="el-zoom-in-left">   -->
                <!-- <div class="perm-box" v-show="props.batchIsShow">  -->
                    <el-button type="success" size="small" title="批量上传" v-show="props.batchIsShow" @click="batchUpload"
                        v-perm="permObj.update"
                    >
                        <el-icon><Upload /></el-icon>
                    </el-button>
                    <el-button type="danger" size="small" title="批量删除" v-show="props.batchIsShow" @click="batchDel" 
                        v-perm="permObj.delete"
                    >
                        <el-icon><DeleteFilled /></el-icon>
                    </el-button>
                <!-- </div> -->
            <!-- </transition> -->
            <el-button type="primary" size="small" title="导出" @click="showDownload" class="download" >
                <el-icon><Download /></el-icon>
                <transition name="el-zoom-in-left">
                <div class="download-box"  v-show="props.downloadBoxShow">
                    <div class="export" @click="downloadExcelPaging">导出当前页</div>
                    <div class="export" @click="downloadExcelAll">导出全部</div>
                </div>
                </transition>
            </el-button>
            <el-button type="success" size="small" title="新增" @click="addClick"
                v-perm="permObj.add"
            >
                <el-icon><DocumentAdd /></el-icon>
            </el-button>
        </div>
        <div class="control-slot">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>

let emit = defineEmits(['addClick','showDownload','downloadExcelPaging','downloadExcelAll','batchToggleShow','batchDel','batchUpload'])
let addClick = ()=> emit('addClick')
let downloadExcelPaging = () => emit('downloadExcelPaging')
let downloadExcelAll = () => emit('downloadExcelAll')
let showDownload = () => emit('showDownload')
let batchToggleShow = () => emit('batchToggleShow') 
let batchDel = () => emit('batchDel')
let batchUpload = () => emit('batchUpload')

let props = defineProps({
    downloadBoxShow:Boolean,
    batchIsShow:Boolean,
    permObj:Object
})
// console.log(props);


</script>

<style lang="less" scoped>
.control-btn-box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    width: 70%;
    .control-slot{
        margin-left: .625rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 60%;
    }

    .btn-box{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 40%;
    }
    // .el-button{
    //     margin-right: .625rem;
    // }
    // .perm-box{
    //     display: flex;
    //     justify-content: flex-start;
    //     align-items: center;
    // }
}
.download{
    position: relative;
    .download-box{
        position: absolute;
        top:110%;
        border: 1px solid #165bf0;
        background-color: #fff;
        height: 3.125rem;
        width: 4.6875rem;
        z-index: 100;
        .export{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50%;
            width: 100%;
            color: #165bf0;
        }
        .export:hover{
            background-color: #5084f5;
            color: #fff;
            cursor: pointer;
        }
    }
}
</style>